<template>
  <el-card shadow="hover" class="statistics-data">
    <header class="statistics-title-wrapper">
      <div class="statistics-title">
        <div class="text">{{ title }}</div>
        <div class="time">{{ yesterday }}</div>
      </div>
    </header>
    <section class="statistics-data-wrapper">
      <el-card shadow="hover" class="data-card statistics-data-totalCount">
        <div class="title">累计用户数</div>
        <div class="data-total">{{ statisticsData.totalCount + 11000 }}</div>
      </el-card>
      <el-card shadow="hover" class="data-card statistics-data-modifiedTotalCount">
        <div class="title">昨日访问人数</div>
        <div class="data-total">{{ statisticsData.modifiedTotalCount }}</div>
      </el-card>
      <el-card shadow="hover" class="data-card statistics-data-createTotalCount">
        <div class="title">昨日新增用户</div>
        <div class="data-total">{{ statisticsData.createTotalCount }}</div>
      </el-card>
    </section>
  </el-card>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'DataStatistics',
  data() {
    return {
      title: '昨日核心数据',
      selectCategory: '核心数据分析',
      statisticsData: {}
    }
  },
  computed: {
    yesterday() {
      const timestamp = new Date(new Date(Date.now()).getTime() - 1000 * 3600 * 24)
      const year = timestamp.getFullYear()
      const month = timestamp.getMonth() + 1
      const date = timestamp.getDate()
      return `${year}年${month}月${date}日`
    }
  },
  mounted() {
    this.getDataStatistics()
  },
  methods: {
    getDataStatistics() {
      request.get('/api/info/user/count').then((result) => {
        this.statisticsData = result
      })
    }
  }
}
</script>

<style scoped lang="scss">
.statistics-data {
  height: calc(100vh - 70px);
}

.statistics-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .statistics-title {
    .text {
      font-weight: 500;
      margin-bottom: 10px;
    }
    .time {
      font-size: 12px;
      color: #999;
      margin-bottom: 10px;
    }
  }
}
.statistics-data {
  &-wrapper {
    display: flex;
    box-sizing: border-box;
    .data-card {
      flex: 1;
      margin-right: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      &:last-child {
        margin-right: 0;
      }
      .title {
        font-size: 12px;
        color: #999;
        margin-bottom: 10px;
      }
      .data-total {
        text-align: center;
      }
    }
  }
}
</style>
